<!DOCTYPE html>
<html lang="zxx">

<head>
    <title>登录</title>
    <!-- Meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- //Meta tags -->
    <link rel="stylesheet" th:href="@{/css/style-login.css}" type="text/css" media="all" /><!-- Style-CSS -->
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet"><!-- font-awesome-icons -->
</head>

<body>
<section class="w3l-form-36">
    <div class="form-36-mian section-gap">
        <div class="wrapper">
            <div class="form-inner-cont">
                <h3>Login now</h3>
                <form class="signin-form" id="userInfo">
                    <div class="form-input">
                        <span class="fa fa-user-o" aria-hidden="true"></span> <input type="text" name="username" id="username"
                                                                                         placeholder="Username" required autocomplete="off" value="刘备"/>
                    </div>
                    <div class="form-input">
                        <span class="fa fa-key" aria-hidden="true"></span> <input type="password" name="password" id="password"
                                                                                  placeholder="Password" required  autocomplete="off" value="123123"/>
                    </div>
                    <div class="login-remember d-grid">
                        <button class="btn theme-button" id="login">登录</button>
                    </div>
                </form>

                <p class="signup">还没有账号？立即<a th:href="@{/register}" class="signuplink">注册</a></p>
            </div>

            <!-- copyright -->
            <div class="copy-right">
                <p>Copyright &copy; 2022.Company name All rights reserved.</p>
            </div>
            <!-- //copyright -->
        </div>
    </div>
</section>


<!-- jQuery -->
<script th:src="@{js/jquery.min.js}"></script>
<!-- jQuery.form -->
<script th:src="@{js/jquery.form.min.js}"></script>
<!-- layer -->
<script th:src="@{js/layer.js}"></script>



<script>
    //登录表单提交
    $('#userInfo').submit(function(){
        var data = $("#userInfo").serialize();

        var options = {
            type : 'post',
            url  : 'http://localhost:80/api/global/login',
            data : data,
            beforeSubmit: function(){
                //字段验证
            },
            success: function(result){
                //提交成功后返回
                //登录错误
                if (result.code !== 0){
                    layer.msg(result.msg)
                    return ;
                }
                //登录成功，将当前用户保存到sessionStorage
                sessionStorage.setItem("user", JSON.stringify(result.data));
                window.location.href = "/client";
            },
        };

        $('#userInfo').ajaxSubmit(options);
        return false;
    });


</script>
</body>

</html>